<template>
  <div class="container">
    <el-card>
      <!-- 搜索部分 -->
      <el-form :inline="true" ref="formInline" :model="formInline">
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="formInline.directoryName"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="clearFrom">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <!-- <a href="" class="blue"></a> -->
          <el-link
            v-if="xueId"
            type="primary"
            :underline="false"
            @click="$router.go(-1)"
          >
            <i class="el-icon-back"></i>
            返回学科</el-link
          >
          <el-button
            style="margin-left: 15px"
            @click="searchList('add')"
            type="success"
            icon="el-icon-edit"
          >
            新增目录
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 显示总数据 -->
      <el-alert type="info" show-icon :closable="false" class="alert">
        数据一共{{ counts }}条
      </el-alert>
      <!-- 表格部分 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="80" type="index">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template #default="{ row }">
            <span>{{ row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            {{ row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="stop(row)">{{
              row.state === 1 ? '已启用' : '已禁用'
            }}</el-button>
            <el-button
              type="text"
              size="small"
              @click="searchList('edit', row)"
              :disabled="row.state === 1"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="del(row.id)"
              :disabled="row.state === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页部分 -->
      <el-pagination
        class="pageHight"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="Number(info.pagesize)"
        :current-page="Number(info.page)"
        layout="->,prev, pager, next,sizes,jumper"
        :total="Number(counts)"
      >
      </el-pagination>
    </el-card>
    <!-- 点击新增 有弹出框 -->
    <el-dialog
      :visible.sync="dialogFormVisible"
      @close="handleclose"
      :title="title"
      ref="editUser"
      width="400px"
    >
      <el-form
        :model="addFrom"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        style="width: 300px"
      >
        <el-form-item label="所属学科" v-if="!xueId" prop="subjectID">
          <el-select v-model="addFrom.subjectID" placeholder="请选择">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in lableList"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            v-model="addFrom.directoryName"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="handleclose">取消</el-button>
          <el-button type="primary" @click="addList">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, remove, update, changeState } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  name: 'directorys',
  data () {
    return {
      againVisible: false,
      lableList: [],
      dialogFormVisible: false,
      info: {
        page: 1,
        pagesize: 10
      },
      title: '',
      counts: '',
      tableData: [],
      addFrom: {
        subjectID: '',
        directoryName: '',
        subjectName: ''
      },
      formInline: {
        directoryName: null,
        state: null
      },
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ],
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'change' }
        ]
      },
      xueList: []
    }
  },
  created () {
    this.getDirectorysList()
  },
  computed: {
    xueId () {
      return +this.$route.query.id || null
    },
    name () {
      return +this.$route.query.name
    }
  },
  methods: {
    // 获取目录列表
    async getDirectorysList () {
      const { data } = await list({
        ...this.info,
        subjectID: this.xueId
      })
      this.tableData = data.items
      this.counts = data.counts
    },
    // 每页显示条数
    handleSizeChange (val) {
      this.info.pagesize = val
      if (this.info.page === 1) {
        this.getDirectorysList(this.info)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.info.page = val
      this.getDirectorysList()
    },
    // 添加、编辑之后表单清空
    query () {
      this.addFrom = {
        subjectID: '',
        directoryName: ''
      }
    },
    // 点击会有弹出框 下拉所属学科
    async searchList (state, row) {
      const { data } = await simple()
      this.dialogFormVisible = true
      this.lableList = data
      if (state === 'add') {
        this.title = '新增'
      } else if (state === 'edit') {
        const {
          config: { data }
        } = await update(row)
        this.addFrom = JSON.parse(data)
        this.title = '编辑'
      }
    },
    // 弹出框新增添加确认
    async addList () {
      if (this.title === '新增') {
        await add(this.addFrom)
      } else {
        await update(this.addFrom)
      }
      this.$message.success(`${this.title}成功`)
      this.info.page = 1
      this.handleclose()
      this.getDirectorysList()
    },

    // 删除
    async del (id) {
      try {
        await this.$confirm('此操作将永久删除该目录,是否继续?', '提示')
        await remove({ id })
        this.$message.success('删除成功')
        if (this.lableList.length === 1 && this.page > 1) {
          this.page--
        }
        this.getDirectorysList()
      } catch (err) {
        console.log(err)
      }
    },
    // 禁用
    async stop (row) {
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      this.getDirectorysList()
    },

    // 清除
    clearFrom () {
      this.$refs.formInline.resetFields()
    },
    // 搜索
    async search () {
      this.info.page = 1
      const { data } = await list({ ...this.formInline, ...this.info })
      this.tableData = data.items
      this.counts = data.counts
    },
    handleclose () {
      this.dialogFormVisible = false
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.alert {
  height: 30px;
  margin: 10px 0px;
}
.pageHight {
  margin-top: 10px;
}
</style>
